<template>
  <div ref="nana">
    <p class="inlineLoading" v-if="$route.path !== '/qstrategy/all' && $route.path !== '/laboratory'">
      <inline-loading style="height: 30px;width: 30px" v-show="$store.state.loading"></inline-loading>
    </p>
    <div v-transfer-dom>
      <x-dialog :dialog-style="uploadStyle" :show="isDownloadProcess">
        <x-circle v-if="downloadProcess !== 100" :percent="downloadProcess" stroke-color="#4D63EB" :stroke-width="5">
          <span>更新进度:{{downloadProcess}}%</span>
        </x-circle>
        <div v-else @click="openApk" style="display: flex;justify-content: center;align-items: center;height: 100%;width: 100%">下载完成，请点击打开apk开始安装</div>
      </x-dialog>
    </div>
    <!-- <transition :name="$router.isBack ? 'slide-right' : 'slide-left'"> -->
      <router-view class="warp-box-container" v-if="!$route.meta.keepAlive">
      </router-view>
      <keep-alive v-else>
        <router-view class="warp-box-container">
        </router-view>
      </keep-alive>
    <!-- </transition> -->
  </div>
</template>

<script>
  import './assets/fonts/iconfont.js'
  import './assets/css/base.css'
  import { InlineLoading, XDialog, XCircle } from 'vux'
  import { TransferDomDirective as TransferDom } from 'vux'
  import { MessageBox } from 'mint-ui'

  export default {
    components: {
      InlineLoading,
      XCircle,
      MessageBox,
      XDialog
    },
    directives: {
      TransferDom
    },
    data () {
      return {
        updateApkMsg: '正在下载安装包，请等待...',
        downloadProcess: 0,
        isDownloadProcess: false,
        uploadStyle: {
          height: '100px',
          width: '100px',
          padding: '20px'
        },
        apkFile: ''
      }
    },
    created () {
      this.$store.state.loading = false
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 320*10 + 'px';
    },
    methods: {
      gotoPage (url) {
        this.$router.push(url)
      },
      openDialog () {
        MessageBox.alert(`<p class="updateMsg">${this.updateApkMsg}</p>`, '下载中...').then(action => {
          this.openDialog()
        });
      },
      openApk () {
        cordova.plugins.fileOpener2.open(
          this.apkFile,
          'application/vnd.android.package-archive'
        )
      }
    },
    mounted () {
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {
          window.open = cordova.InAppBrowser.open;
      }
      if (navigator.platform.indexOf('Linux') > -1) {
        //TODO: 安卓提醒升级
        this.$axios.get(this.$config.host + '/api/misc/version').then((res) => {
          if (res.data.data.version > this.$config.version) {
          let msg = res.data.data.content.replace(new RegExp('-', 'gm'), '<br/>- ')
          MessageBox.alert(`<p class="updateMsg">${msg}</p>`, `发现新版本 v${res.data.data.version}`).then(action => {
            this.isDownloadProcess = true
              const fileTransfer = new FileTransfer()
              const uri = encodeURI('https://mb.quantsgeek.com/android-apk/qstrategy117android1120.apk')
              fileTransfer.download(uri, `/sdcard/qstrategy-v${res.data.data.version}.apk`, (entry) => {
                this.apkFile = entry.toURL()
                cordova.plugins.fileOpener2.open(
                    entry.toURL(),
                    'application/vnd.android.package-archive'
                )
              }, (err) => {

              })
              fileTransfer.onprogress = (progressEvent) => {
                if (progressEvent.lengthComputable) {
                    this.downloadProcess = Math.floor((progressEvent.loaded / progressEvent.total) * 100)
                } else {

                }
              }
            })
          }
       })
      } else {
          this.$axios.post('https://itunes.apple.com/lookup?id=1262900517').then((res) => {
          if (res.data.results[0].version.indexOf('v') > -1) return
          if (res.data.results[0].version > this.$config.version) {
            let msg = res.data.results[0].releaseNotes.replace(new RegExp('-', 'gm'), '<br/>- ')
            MessageBox.alert(`<p class="updateMsg">${msg}</p>`, `发现新版本 ${res.data.results[0].version}`).then(action => {
              let url = 'itms-apps:' + res.data.results[0].trackViewUrl.substring(6)
              window.open(url) // 需要添加cordova-plugin-inappbrowser
            });
          }
        })
      }

      let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      this.$refs.nana.style.height = h + 'px'
    }
  }
</script>

<style lang="less">
.updateMsg {
  line-height: 1.4em;
  width: 80%;
  margin: 0 auto;
  margin-top: -1em;
  text-align: left;
}
  .inlineLoading {
    position: fixed;
    top: 45%;
    left: 50%;
    z-index: 999999;
    margin-left: -10px;
  }
  .warp-box-container{
    height:100%;
  }

  @font-face {
    font-family: 'iconfont';  /* project id 350396 */
    src: url('assets/fonts/iconfont.eot');
    src: url('assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/iconfont.woff') format('woff'),
    url('assets/fonts/iconfont.ttf') format('truetype'),
    url('assets/fonts/iconfont.svg#iconfont') format('svg');
  }

.iconfont {
  font-family:"iconfont" !important;
  /*font-size:16px;*/
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  .icon-kaihuzhinan-iocn1:before { content: "\e662"; }
  .icon-lianxikefuicon1:before { content: "\e669"; }
  .icon-zhanghuanquanicon1:before { content: "\e665"; }
  .icon-jiaoyifeiyongicon1:before { content: "\e667"; }
  .icon-rujinzhinanicon1:before { content: "\e666"; }
  .icon-celvejiaoyiicon1:before { content: "\e664"; }
  .icon-pingcanghuoliicon1:before { content: "\e66d"; }
  .icon-zhuanhuzhinanicon1:before { content: "\e668"; }
  .icon-wenti:before { content: "\e6f2"; }
  .icon-wancheng1:before { content: "\e66f"; }
  .icon-celveleixingicon:before { content: "\e66b"; }
  .icon-touzifenggeicon:before { content: "\e66c"; }
.icon-liwu:before { content: "\e680"; }
.icon-shuaxinx:before { content: "\e670"; }

.icon-paixu:before { content: "\e69a"; }

.icon-xueqiu:before { content: "\e65c"; }

.icon-fangxingweixuanzhong:before { content: "\e720"; }

.icon-fangxingxuanzhongfill:before { content: "\e721"; }

.icon-fangxingxuanzhong:before { content: "\e722"; }

.icon-guanbi2fill:before { content: "\e724"; }

.icon-guanbi2:before { content: "\e725"; }

.icon-jiahao1:before { content: "\e727"; }

.icon-yuanxingweixuanzhong:before { content: "\e72f"; }

.icon-yuanxingxuanzhongfill:before { content: "\e730"; }

.icon-yuanxingxuanzhong:before { content: "\e731"; }

.icon-fenxiang:before { content: "\e739"; }

.icon-gengduo:before { content: "\e73a"; }

.icon-liuyan:before { content: "\e744"; }

.icon-saoma:before { content: "\e749"; }

.icon-shouyefill:before { content: "\e750"; }

.icon-shouye:before { content: "\e751"; }

.icon-wodefill:before { content: "\e75d"; }

.icon-wode:before { content: "\e75e"; }

.icon-xiangshang2:before { content: "\e76e"; }

.icon-xiangxia2:before { content: "\e772"; }

.icon-xiangyou1:before { content: "\e775"; }

.icon-xiangzuo1:before { content: "\e779"; }

.icon-bianjibijishishouxie:before { content: "\e69b"; }

.icon-jianjie:before { content: "\e693"; }

.icon-fanhui:before { content: "\e64c"; }

.icon-kefu3:before { content: "\e661"; }

.icon-jian:before { content: "\e623"; }

.icon-c20_show:before { content: "\e608"; }

.icon-icon-test:before { content: "\e602"; }

.icon-wenhao:before { content: "\e7fd"; }

.icon-zhibo-copy:before { content: "\e600"; }

.icon-celvexiadan:before { content: "\e604"; }

.icon-lianjie:before { content: "\e633"; }

.icon-banbenhao:before { content: "\e605"; }

.icon-pengyouquan:before { content: "\e65d"; }

.icon-tubiaozhizuomoban:before { content: "\e616"; }

.icon-combine-manage:before { content: "\e723"; }

.icon-jijintakaihu:before { content: "\e643"; }

.icon-shoucang:before { content: "\e67d"; }

.icon-jianjie1:before { content: "\e60a"; }

.icon-feiji:before { content: "\e60f"; }

.icon-kefu2:before { content: "\e603"; }

.icon-weixin:before { content: "\e699"; }

.icon-bofang:before { content: "\e733"; }

.icon-_gegujiaoyi:before { content: "\e656"; }

.icon-weibo:before { content: "\e606"; }

.icon-caizhangdie_link:before { content: "\e607"; }

.icon-caizhangdiexuanzhong:before { content: "\e609"; }

.icon-shiyan:before { content: "\e60b"; }

.icon-shiyanweixuanzhong:before { content: "\e60c"; }

.icon-shouyi:before { content: "\e60d"; }

.icon-wodexuanzhong1:before { content: "\e618"; }

.icon-shiyanshixuanzhong1:before { content: "\e619"; }

.icon-shouye2:before { content: "\e61a"; }

.icon-rendashiyanshix1:before { content: "\e61d"; }

.icon-shouyeweixuanzhong1:before { content: "\e61e"; }

.icon-wodex1:before { content: "\e61f"; }

.icon-kefu:before { content: "\e620"; }

.icon-suo1:before { content: "\e621"; }

.icon-fangyu:before { content: "\e622"; }

.icon-fankui:before { content: "\e624"; }

.icon-bangzhu:before { content: "\e625"; }

.icon-xinshourumen:before { content: "\e627"; }

.icon-shangzhang1:before { content: "\e601"; }

.icon-xia:before { content: "\e629"; }

.icon-shang:before { content: "\e62a"; }

.icon-xiaofeiji:before { content: "\e62b"; }

.icon-pinpaijieshao:before { content: "\e62d"; }

.icon-shouyixuanzhong:before { content: "\e62e"; }

.icon-shouyiweixuanzhong1:before { content: "\e62f"; }

.icon-pinpaijieshao-copy:before { content: "\e634"; }

.icon-shouyixuanzhong-copy:before { content: "\e7bd"; }

.icon-shouyiweixuanzhong1-copy:before { content: "\e7be"; }

.icon-shouyidefuben:before { content: "\e638"; }

.icon-shouyixuanzhong1:before { content: "\e639"; }

.icon-jiahao:before { content: "\e63a"; }

.icon-guanbi:before { content: "\e63b"; }

.icon-attention_forbid:before { content: "\e63c"; }

.icon-attention_forbid1:before { content: "\e63d"; }

.icon-xin:before { content: "\e641"; }

.icon-iicon:before { content: "\e644"; }

.icon-icons:before { content: "\e645"; }

.icon-xiayibu:before { content: "\e8b5"; }

.icon-laba:before { content: "\e646"; }

.icon-paixu1:before { content: "\e647"; }

.icon-paixu2:before { content: "\e648"; }

.icon-paixu3:before { content: "\e649"; }

.icon-jiaoyi:before { content: "\e64b"; }

.icon-jiaoyixuanzhongicon:before { content: "\e64d"; }

.icon-lajitongx:before { content: "\e64e"; }

.icon-riliicon:before { content: "\e64f"; }

.icon-money:before { content: "\e650"; }

.icon-fanhui1:before { content: "\e651"; }

.icon-pingcanghuoliicon1:before { content: "\e66d"; }

.icon-lajitong:before { content: "\e66a"; }

</style>
